<script setup lang="ts">
import { ref } from "vue";
import hljs from "highlight.js";
import xml from "highlight.js/lib/languages/xml";
import "highlight.js/styles/github.css";
import { ElMessage } from "element-plus";

hljs.registerLanguage("xml", xml);

const dialogVisible = ref(false);
const codeValue = ref("");
const codeOriginalValue = ref("");

/**
 * 打开
 */
const open = (code: string) => {
  codeOriginalValue.value = code;
  codeValue.value = hljs.highlight(code, { language: "xml" }).value;
  dialogVisible.value = true;
};
/**
 * 关闭
 */
const close = () => {
  dialogVisible.value = false;
};

/**
 * 复制code
 */
const copyCode = () => {
  try {
    navigator.clipboard.writeText(codeOriginalValue.value);
    ElMessage.success("已经成功复制 XML Code");
  } catch (e) {
    ElMessage.error("复制失败");
  }
};

defineExpose({
  open
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="XML Code 预览" width="800px" @close="close">
    <div class="code-content">
      <div class="code-content-box" v-html="codeValue"></div>
      <i class="f-s-18 fas fa-copy position-absolute top-5 right-5 cursor-pointer" @click="copyCode"></i>
    </div>
  </el-dialog>
</template>
